<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的余额',
  },
}
</route>
<template>
  <view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="top pt-11">
      <view class="flex items-center">
        <img
          style="margin-left: 1.13rem"
          src="@/static/app/custom-icon/ze-arrow-left%201@1x.png"
          alt=""
          @click="goView"
        />
        <text class="title">余额</text>
      </view>
      <view class="balance-title">可用余额</view>
      <view class="balance">10.00</view>
      <view class="flex justify-around px-12 mt-6">
        <view class="flex flex-col items-center">
          <text class="bonus-tips">跑腿昨日收入</text>
          <text class="bonus">5.20</text>
        </view>
        <view class="split-line"></view>
        <view class="flex flex-col items-center">
          <text class="bonus-tips">跑腿总收入</text>
          <text class="bonus">25.20</text>
        </view>
      </view>
    </view>

    <!--      底部菜单 -->
    <view class="flex flex-col items-center pb">
      <view class="flex items-center justify-between bottom-item" v-for="item in menus">
        <view class="flex items-center">
          <img style="margin-left: 0.81rem" :src="item.icon" alt="" />
          <text style="margin-left: 0.69rem">{{ item.name }}</text>
        </view>
        <img style="margin-right: 0.88rem" src="@/static/app/custom-icon/ze-arrow.png" alt="" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'Balance',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 列表菜单
const menus = ref([
  {
    icon: new URL('@/static/app/custom-icon/menu_free.png', import.meta.url).href,
    name: '余额明细',
  },
  {
    icon: new URL('@/static/app/custom-icon/menu_like.png', import.meta.url).href,
    name: '余额提现',
  },
])
function goView() {
  uni.navigateBack()
}
</script>

<style scoped>
.top {
  width: 100%;
  height: 19rem;
  line-height: 1.25rem;
  background: linear-gradient(
    86.39deg,
    rgba(148, 235, 246, 1) 4.39%,
    rgba(135, 218, 255, 1) 64.5%,
    rgba(127, 181, 253, 1) 127.07%
  );

  .title {
    position: absolute;
    left: 50%;
    width: 2.5rem;
    height: 1.75rem;
    font-family: SourceHanSansSC-bold;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgba(16, 16, 16, 1);
    transform: translateX(-50%);
  }

  .balance-title {
    height: 1.25rem;
    margin-top: 2.31rem;
    font-family: SourceHanSansSC-regular;
    font-size: 0.88rem;
    line-height: 1.25rem;
    color: rgba(16, 16, 16, 1);
    text-align: center;
  }

  .balance {
    font-family: SourceHanSansSC-bold;
    font-size: 1.75rem;
    line-height: 2.44rem;
    color: rgba(16, 16, 16, 1);
    text-align: center;
  }

  .bonus-tips {
    height: 1.25rem;
    font-family: SourceHanSansSC-regular;
    font-size: 0.88rem;
    line-height: 1.25rem;
    color: rgba(16, 16, 16, 1);
  }

  .bonus {
    height: 1.88rem;
    font-family: SourceHanSansSC-bold;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgba(16, 16, 16, 1);
  }
}

.split-line {
  width: 0.06rem;
  height: 3.5rem;
  background-color: black;
}

.bottom-item {
  width: 21.38rem;
  height: 3.38rem;
  margin-top: 0.88rem;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);

  text {
    height: 1.25rem;
    font-family: SourceHanSansSC-regular;
    font-size: 0.88rem;
    line-height: 1.25rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
  }
}
</style>
